<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!--{include file='comm/header.tpl'}-->
    <title><!--{if $operFlg == 3}-->修改配送站<!--{else}-->添加配送站<!--{/if}--></title>
    <!--{include file='comm/comm_editor.tpl'}-->
    <!--{include file='comm/comm_region.tpl'}-->
    <!--{include file="comm/icheck.tpl"}-->

</head>

<body>

<div class="panel panel-default">
    <!--{if $operFlg == 3 && empty( $templateMsg ) }-->
    <div style="position:relative;text-align: center;height: 50px;line-height: 50px;font-size: 16px;color: #ff0000;">
        配送站信息未找到
    </div>
    <!--{else}-->

    <div class="panel-heading">
        <h2 style="" class="tal">正在操作：<!--{if $operFlg == 3}-->修改<!--{else}-->添加<!--{/if}-->配送站</h2>
    </div>

    <div class="panel-body">

        <form id="item_form" onsubmit="return false;" class="form-horizontal">

            <input type="hidden" id="distribution_id" name="distribution_id" value="<!--{$templateMsg.distribution_id|default:0}-->">

            <div class="form-group">
                <label class="col-sm-2 control-label" for="distribution_name">
                    <span class="red">*</span>
                    配送站名称：
                </label>
                <div class="col-sm-10">
                    <input id="distribution_name" class="form-control w300" type="text" placeholder="请输入配送站名称" value="<!--{$templateMsg.distribution_name|default:''}-->" name="distribution_name">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label" for="distribution_code">
                    <span class="red">*</span>
                    配送站编号：
                </label>
                <div class="col-sm-10">
                    <input id="distribution_code" class="form-control w300" type="text" placeholder="请输入配送站编号" name="distribution_code" value="<!--{$templateMsg.distribution_code|default:''}-->">
                </div>
            </div>
            <div class="form-group">

                <label class="col-sm-2 control-label">  <span class="red">*</span> 音频文件：</label>

                <div class="col-sm-10">
                    <input type="button" class="btn btn-default" id="update_media" value="点击上传音频">
                    <div id="logo_img_box" style="<!--{if $operFlg == 2}-->display: none;<!--{/if}-->margin-top: 5px;">
                        <audio controls="controls"><source src="<!--{$templateMsg.audio|default:''}-->" type="audio/ogg" />您的浏览器不支持 audio 标签。</audio>
                    </div>
                    <input type="hidden" name="audio" id="audio" value="" />
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label"><span class="red">*</span> 省市区：</label>
                <div class="col-sm-10">
                    <select class="form-control fl" id="oneLevelID" name="provinceid" style="width: 100px;margin-right: 5px;">
                        <option value="">请选择...</option>
                    </select>
                    <select class="form-control fl" id="secondLevelID" name="cityid" style="width: 100px;margin-right: 5px;">
                        <option value="">请选择...</option>
                    </select>
                    <select class="form-control fl" id="threeLevelID" name="countyid" style="width: 100px;">
                        <option value="">请选择...</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="address">
                    <span class="red">*</span>
                    配送站地址：
                </label>
                <div class="col-sm-10">
                    <input id="address" style="float: left" class="form-control w300" type="text" placeholder="请输入配送站地址" name="address" value="<!--{$templateMsg.address|default:''}-->">&nbsp;&nbsp;
                    <button type="button" class="btn btn-primary" id="setMapBtn" onclick="setMapDisplay();">标注到地图</button>
                </div>
            </div>
            <div class="form-group map" id="map_tr" style="display: none;">
                <label class="col-sm-2 control-label" for="latitude">

                </label>
                <div class="tar"></div>
                <div class="col-sm-10" style="height:210px; padding-bottom:5px;">
                    <div id="allmap" style="height:200px; width:600px;"></div>
                </div>

            </div>
            <div class="form-group map" id="_longitude" style="display:none">
                <label class="col-sm-2 control-label" for="longitude">
                    <span class="red">*</span>
                    经度：
                </label>
                <div class="col-sm-10">
                    <input id="longitude" class="form-control w300" type="text" name="longitude" value="" readonly="readonly">
                </div>
            </div>

            <div class="form-group map" id="_latitude" style="display:none">
                <label class="col-sm-2 control-label" for="latitude">
                    <span class="red">*</span>
                    纬度：
                </label>
                <div class="col-sm-10">
                    <input id="latitude" class="form-control w300" type="text" name="latitude" value="" readonly="readonly">
                </div>
            </div>


            <div class="form-group">
                <label class="col-sm-2 control-label" for="principal">
                    <span class="red">*</span>
                    配送站负责人：
                </label>
                <div class="col-sm-10">
                    <input id="principal" class="form-control w300" type="text" placeholder="请输入配送站负责人" name="principal" value="<!--{$templateMsg.principal|default:''}-->">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="mobile">
                    <span class="red">*</span>
                    联系手机：
                </label>
                <div class="col-sm-10">
                    <input id="mobile" class="form-control w300" type="text" placeholder="请输入联系手机" name="mobile" value="<!--{$templateMsg.mobile|default:''}-->">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="phone">
                    <span class="red">*</span>
                    联系电话：
                </label>
                <div class="col-sm-10">
                    <input id="phone" class="form-control w300" type="text" placeholder="请输入联系电话" name="phone" value="<!--{$templateMsg.phone|default:''}-->">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label" for="distribution_id">
                    <span class="red">*</span>
                    类型：
                </label>
                <div class="col-sm-10">
                    <select class="form-control w150" id="distribution_type" name="distribution_type">
                        <option value="">请选择</option>
                        <option value="1">配送站</option>
                        <option value="2">自提点</option>
                        <option value="3">配送站和自提点</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-2 control-label">地图区域划分：</label>
                <div class="col-sm-10" id="area">

                </div>
            </div>
        </form>
    </div>

    <div class="bottom_fixbox">
        <div class="tac" style="background: #dddddd;">
            <input type="button" class="btn btn-primary" onclick="distribution.edit.check();" value="保存" />&nbsp;&nbsp;&nbsp;
            <input type="button" class="btn btn-default" onclick="E.closeWindows();" value="关闭" />
        </div>
    </div>
    <!--{/if}-->
</div>

<!--baidu map-->
<!--{include file="comm/baidu_map.tpl"}-->

<script type="text/javascript">

var distribution = {

    operFlg:<!--{$operFlg}-->,

    area_id_array: <!--{if isset($area_id_json)}--><!--{$area_id_json}--><!--{else}-->{}<!--{/if}-->,

    //添加或修改配送站
    edit:{

        //检查数据
        check: function() {

            this.dt = E.getFormValues('item_form');

            this.dt.provinceName = this.dt.provinceid != "" ? $("#oneLevelID option:selected").text() : '';
            this.dt.cityName = this.dt.cityid != "" ? $("#secondLevelID option:selected").text() : '';
            this.dt.countyName = this.dt.countyid != "" ? $("#threeLevelID option:selected").text() : '';

            var error_msg = '';

            if (E.isEmpty(this.dt.distribution_name))
                error_msg += '配送站名称不能为空<br/>';

            if (E.isEmpty(this.dt.distribution_code))
                error_msg += '配送站编号不能为空<br/>';

            if(E.isEmpty(this.dt.address))
                error_msg += '配送站地址不能为空<br/>';

            if(E.isEmpty(this.dt.provinceid))
                error_msg += '请选择省名<br/>';

            if(E.isEmpty(this.dt.cityid))
                error_msg += '请选择市名<br/>';

            if(E.isEmpty(this.dt.countyid))
                error_msg += '请选择区名<br/>';

            if(E.isEmpty(this.dt.principal))
                error_msg += '配送站负责人不能为空<br/>';

            if (!E.isMobile(this.dt.mobile)){
                error_msg += '手机号码格式不正确<br/>';
            }

            if (!E.isPhone(this.dt.phone))
                error_msg += '联系电话格式不正确<br/>';

            if(this.dt.distribution_type == ''){
                error_msg += '请选择类型<br/>';
            }


            if (error_msg != '') {
                E.alert(error_msg);
            } else {

                E.confirm('您确认添加配送站吗？', 'distribution.edit.execute');

            }

        },

        execute: function() {

            E.loadding.open('正在保存，请稍候...');

            E.ajax_post({
                url: '/invokingAjax-backend/system/distributionSetting.ajax?operFlg=100&act=edit',
                data: this.dt,
                call: 'distribution.edit.result'
            });

        },

        result: function( o ) {

            E.loadding.close();

            if (o.code == 200) {

                if (this.dt.distribution_id > 0) {
                    E.popup.close();
                } else {
                   var cityid = $('#secondLevelID').val();
                    $('#area_box_' + cityid).remove();
                    document.getElementById('item_form').reset();
                }
                $('#map_tr').hide();
                $('#_longitude').hide();
                $('#_latitude').hide();
                E.opener("distribution.load");
                <!--{if $operFlg == 3 }-->
                E.closeWindows();
                <!--{/if}-->
                E.alert(o.message, 2, 'distribution.load');
            } else {
                E.alert(o.message);
            }

        }

    }

};

    //标记地图
    function setMapDisplay(){

        var address = $("input[name='address']").val();

        if ( address ) {
           $(".map").show();
       } else {
            $(".map").hide();
        }

        showMap(address.toString());

    }

    var pid = <!--{$templateMsg['provinceid']|default:0}-->;
    var cid = <!--{$templateMsg['cityid']|default:0}-->;
    var ccid = <!--{$templateMsg['countyid']|default:0}-->;


    $('#distribution_type').val(<!--{$templateMsg.distribution_type}-->);

    //显示省市区
    E.region.init({
        p: 'oneLevelID',
        c: 'secondLevelID',
        a: 'threeLevelID',
        pid: pid,
        cid: cid,
        ccid: ccid
    });



    //绑定上传音频
    KindEditor.ready(function(K) {
        var kindEditor_upload = K.editor({
            allowFileManager : true,
            uploadJson: '/framework/kindeditor/php/upload_json.php?act=system'
        });
        $(document).on('click', '#update_media', function() {
            kindEditor_upload.loadPlugin('image', function() {
                kindEditor_upload.plugin.imageDialog({
                    showRemote : false,
                    clickFn : function(url) {
                        $('#logo_img_box').html('<audio controls="controls"><source src="' + url + '" type="audio/ogg" />您的浏览器不支持 audio 标签。</audio>').show();
                        $('#logo_img_box').hide();
                        $('#audio').val(url);
                        kindEditor_upload.hideDialog();
                    }
                });
            });
        });
    });


//百度地图显示
function showMap ( address ) {

    var map = new BMap.Map("allmap");
    map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}));
    var myGeo = new BMap.Geocoder();

    myGeo.getPoint( address, function(point){
        if(point){
            var lng = $('#longitude').val();
            var lat = $('#latitude').val();
            if((lng != '') && (lat !='') && (parseInt(lng)!=0)&& (parseInt(lat)!=0)){
                var point = new BMap.Point(lng, lat);
            }else{
                $('#longitude').val(point.lng);
                $('#latitude').val(point.lat);
            }
            map.centerAndZoom(point, 18);
            var marker = new BMap.Marker(point);


            //开启坐标点拖拽属性
            marker.enableDragging();

            //在地图上设置坐标点
            map.addOverlay(marker);
            //marker下坠效果
            marker.setAnimation(BMAP_ANIMATION_DROP);

            //设置信息窗口
            var opts = {
                width : 0,     // 信息窗口宽度
                height: 0,     // 信息窗口高度
                enableMessage:false,
                enableCloseOnClick:false,
                title : "<span style='color:red;font-weight:bold;'>位置不对吗？？</span>"  // 信息窗口标题
            };
            var html = '<div class="infoWindow_content">快来拖动此图标到达正确位置</div>';
            var infoWindow = new BMap.InfoWindow(html,opts);
            marker.openInfoWindow(infoWindow);

            //开始拖拽
            marker.addEventListener("dragstart", function(e){
                marker.closeInfoWindow(infoWindow);
            });

            //结束拖拽
            marker.addEventListener("dragend", function(e){
                myGeo.getLocation(e.point, function(rs){
                    $('#longitude').val(e.point.lng);
                    $('#latitude').val(e.point.lat);
                });
            });
        }
    });

}

//显示地图区域划分
$(window).ready(function() {

    var temp = $('#secondLevelID').val();

    if(temp != ""){
        getCityArea(temp);
    }

    $(document).on('change', '#oneLevelID', function() {
        $('#area').html('');
    });

    $(document).on('change', '#secondLevelID', function() {

        var cityID = $(this).children('option:selected').val();

        if(temp == ""){
            temp = cityID;
            getCityArea(temp);
        }else{
            if(temp !=cityID){
                $('#area_box_' + temp).remove();
                getCityArea(cityID);
            }
            temp = cityID;
        }
    });

});

//地图区域显示函数
function getCityArea(cityID){

    E.ajax_post({
        url: '/invokingAjax-backend/system/distributionSetting.ajax?operFlg=3',
        data: {
            cityID: cityID
        },
        call: function( obj ) {

            if(obj.code ==200 && obj.data != null){

                var distributionHtml = '<div id="area_box_' + cityID + '">';

                $.each(obj.data, function(i,val){
                    distributionHtml +='<div class="fl" style="margin: 0px 10px 10px 0px;">';

                    if (E.inArray(val.areaID, distribution.area_id_array)) {
                        distributionHtml +='<input type="checkbox" class="square-radio" id="area-checkbox-'+val.areaID+'" name="areaID" value="'+val.areaID+'" checked>';
                    } else {
                        distributionHtml +='<input type="checkbox" class="square-radio" id="area-checkbox-'+val.areaID+'" name="areaID" value="'+val.areaID+'">';
                    }

                    distributionHtml +='<label for="area-checkbox-'+val.areaID+'" style="margin-left: 10px;">'+val.areaName+'</label>';
                    distributionHtml +='</div>';
                });

                distributionHtml += '</div>';

                $('#area').append(distributionHtml);

                $('.square-radio').iCheck({
                    checkboxClass: 'icheckbox_square-blue',
                    radioClass: 'iradio_square-blue',
                    increaseArea: '20%' // optional
                });

            }

        }
    });
}

</script>

</body>

</html>
